<template>
  <el-row class="overview-container" :gutter="10">
    <el-col :span="7">
      <div class="notify-container">
        <my-panelX @toSubModule="toSubModuleOfAnnounce" :configs="announceconfigs"></my-panelX>
      </div>
      <div class="todolist-container">
        <!-- 我的任务 -->
        <my-panelX @toSubModule="toSubModuleOfTodo" :configs="todoListConfig"></my-panelX>
      </div>
    </el-col>
    <el-col :span="11">
      <div class="progress-container">
        <my-panelX @toSubModule="toSubModuleOfProgress" :configs="toSubModuleOfProgress">
          <div slot="custom-body" class="in-progress-container">
            <!-- 静态步骤区域 -->
            <el-row class="progress-header">
              <div class="title">工程编号</div>
              <div class="step">开始</div>
              <div class="step">策划</div>
              <div class="step">外业</div>
              <div class="step">内业</div>
              <div class="step">总体校审</div>
              <div class="step">成果提交</div>
              <div class="step">工程结束</div>
            </el-row>
            <!-- 进度图显示主区域 -->
            <vue-seamless-scroll
              class="progress-body"
              :data="progressVO"
              :class-option="scrolloption"
            >
              <div v-for="item in progressVO" :key="item.id" class="progress-item">
                <div class="item-projectid">{{item.project_id}}</div>
                <!-- <el-tooltip
                  
                  :content="pro.title+' '+pro.time"
                >-->
                <div
                  v-for="(pro,index) in item.progress"
                  :key="index"
                  :class="'item-status'+' '+pro.status"
                ></div>
                <!-- </el-tooltip> -->
              </div>
            </vue-seamless-scroll>
          </div>
        </my-panelX>
      </div>
      <div class="picture-container">
        <my-panelX @toSubModule="toSubModuleOfSketch" :configs="skecthListConfig">
          <div slot="custom-body" style="height:100%;">
            <el-carousel :autoplay="true" :interval="4000">
              <el-carousel-item v-for="item in skecthListConfig.data" :key="item">
                <el-image style="width:100%;height:100%" fit="contain" :src="item"></el-image>
              </el-carousel-item>
            </el-carousel>
          </div>
        </my-panelX>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="other-container">
        <my-panelX @toSubModule="toSubModuleOfTodo" :configs="otherConfig">
          <div slot="custom-body" class="btns-container" style="width:100%; height:100%">
            <div class="btn-item" @click="toOrganizationPage">
              <div>
                <i class="fzxfont fzxorg"></i>
              </div>
              <span>组织架构</span>
            </div>
            <div class="btn-item" @click="toFileCenterPage">
              <div>
                <i class="fzxfont fzxfile"></i>
              </div>
              <span>文件中心</span>
            </div>
            <div class="btn-item" @click="toEmergencyPage">
              <div>
                <i class="fzxfont fzxphone"></i>
              </div>
              <span>紧急电话</span>
            </div>
          </div>
        </my-panelX>
      </div>
      <div class="location-container">
        <my-panelX :configs="locationConfigs" @ready="onMapContainerReady">
          <div slot="custom-body" id="container" style="width:100%; height:100%"></div>
        </my-panelX>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import myPanelX from "../../../components/base/panelX";
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  components: { myPanelX, vueSeamlessScroll },

  created() {
    //公告
    var proInfo = [];
    this.$api.announce
      .list({
        roleid: this.$store.state.m_user.userInfo.roleId,
        subject_id: this.$store.state.projectInfo.projectName
      })
      .then(result => {
        if (result.code == 200) {
          // if (result.data.length > 4) {
          // proInfo = result.data.splice(0, 5);
          // } else {
          proInfo = result.data;
          // }
          this.announceconfigs.data = [];
          proInfo.forEach(item => {
            this.announceconfigs.data.push(item);
          });
        } else {
          this.$message.error(res.msg);
        }
      })
      .catch(err => {
        this.$message.error(err);
      });

    this.$api.startitem
      .getTodoList(this.$store.state.m_user.userInfo.id)
      .then(res => {
        if (res.code == 200) {
          this.todoListConfig.data = [];
          res.data.forEach(item => {
            let abc = JSON.parse(JSON.stringify(item));
            abc.createTime = abc.createTime.split(" ")[0];
            this.todoListConfig.data.push(abc);
          });
        } else {
          this.$message.error(res.msg);
        }
      })
      .catch(err => {
        this.$message.error(err);
      });

    this.$api.sketch
      .query(this.$store.state.projectInfo.projectName)
      .then(result => {
        if (result.code == 200) {
          var imglist = [];
          if (result.data) {
            result.data.forEach(item => {
              if (item.url !== null && item.url !== "") {
                imglist.push(item.url.split(";")[0]);
              }
            });
          }
          if (imglist.length > 0) {
            this.skecthListConfig.data = imglist;
          } else {
          }
        }
      })
      .catch(err => {
        console.log(err);
      });

    this.$api.nodeprogress
      .query({ subject_id: this.$store.state.projectInfo.projectName })
      .then(res => {
        if (res.code === 200) {
          this.toSubModuleOfProgress.data = res.data;
        }
      });
  },

  mounted() {
    console.log("overview mounted");
    this.initMap();
  },

  data() {
    return {
      src1: require("../../../assets/images/program_temp.png"),
      src2: require("../../../assets/images/photo_temp.png"),
      src3: require("../../../assets/images/loaction.png"),
      announceconfigs: {
        labelText: "公告信息",
        mainPath: "main/index_detail", //模块主要的路由
        mode: "list",
        columns: {
          main: "notice_title",
          sub: "notice_type"
        },
        data: []
      },

      todoListConfig: {
        mode: "list",
        labelText: "我的待办",
        mainPath: "main/index_detail/mytasks",
        columns: {
          main: "flowNodeName",
          sub: "createTime"
        },
        data: []
      },

      toSubModuleOfProgress: {
        mode: "custom",
        labelText: "节点进度",
        mainPath: "main/index_detail/nodeprogress",
        data: []
      },

      skecthListConfig: {
        mode: "custom",
        labelText: "工程剪影",
        mainPath: "main/index_detail/sketch",
        data: []
      },

      otherConfig: {
        mode: "custom",
        labelText: "常用链接",
        showMore: false
      },

      locationConfigs: {
        mode: "custom",
        labelText: "项目位置",
        showMore: false
      }
    };
  },

  computed: {
    scrolloption() {
      return {
        step: 0.2,
        limitMoveNum: 4,
        hoverStop: true,
        direction: 1,
        openWatch: true,
        waitTime: 0
      };
    },
    progressVO() {
      let showdata = [];
      this.toSubModuleOfProgress.data.map(item => {
        let temp = {};
        temp.project_id = item.project_id;
        temp.progress = [];

        if (
          item.consultation_verification &&
          item.consultation_verification !== ""
        ) {
          // 全部结束
          temp.progress.push({
            title: "完成时间",
            time: item.consultation_verification,
            status: "finish"
          });
          temp.progress.push({ title: "工程结束", time: "", status: "finish" });
        }
        if (
          item.prospecting_verification &&
          item.prospecting_verification !== ""
        ) {
          temp.progress.unshift({
            title: "完成时间",
            time: item.prospecting_verification,
            status: "finish"
          });
        }
        if (item.inside_work && item.inside_work !== "") {
          temp.progress.unshift({
            title: "完成时间",
            time: item.inside_work,
            status: "finish"
          });
        }
        if (item.field_work && item.field_work !== "") {
          temp.progress.unshift({
            title: "完成时间",
            time: item.field_work,
            status: "finish"
          });
        }
        if (item.plan && item.plan !== "") {
          temp.progress.unshift({
            title: "完成时间",
            time: item.plan,
            status: "finish"
          });
        }
        temp.progress.unshift({
          title: "创建时间",
          time: item.create_time,
          status: "finish"
        });
        // if (temp.progress.length < 7) {
        //   temp.progress.push({ title: "进行中", time: "", status: "runing" });
        // }

        let rest = 7 - temp.progress.length;

        if (rest > 0) {
          for (let i = 0; i < rest; i++) {
            temp.progress.push({ title: "未开始", time: "", status: "" });
          }
        }
        console.log(temp);
        showdata.push(temp);
      });
      return showdata;
    }
  },

  methods: {
    onMapContainerReady() {
      // this.initMap();
    },

    /**
     * @description: 初始化地图位置
     * @param {type}
     * @return:
     */
    initMap() {
      let map = new AMap.Map("container", {
        center: [116.703931, 39.903186],
        resizeEnable: true,
        zoom: 15
      });

      map.setStatus({
        dragEnable: false,
        keyboardEnable: true,
        doubleClickZoom: true,
        zoomEnable: true,
        rotateEnable: true
      });

      map.on("zoomchange", () => {
        map.panTo([116.703931, 39.903186]);
      });

      var marker = new AMap.Marker({
        position: new AMap.LngLat(116.703931, 39.903186), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: "副中心枢纽勘察项目"
      });
      // marker.setLabel({
      //   offset: new AMap.Pixel(20, 20), //设置文本标注偏移量
      //   content:
      //     "<div class='map-marker-info' style='padding:5px;background-color:white;color:black'>副中心枢纽勘察项目</div>", //设置文本标注内容
      //   direction: "top" //设置文本标注方位
      // });
      map.add(marker);
    },

    /**
     * @description: 工程剪影子模块
     * @param {type}
     * @return:
     */
    toSubModuleOfSketch(index) {},

    /**
     * @description: 我的待办子模块
     * @param {type}
     * @return:
     */
    toSubModuleOfTodo(index) {
      let row = this.todoListConfig.data[index];
      console.log(row);

      this.$router.push({
        path: row.path,
        query: { id: row.businessId, todo: true }
      });
    },

    /**
     * @description: 公告子模块
     * @param {type}
     * @return:
     */
    toSubModuleOfAnnounce(index) {
      let row = this.announceconfigs.data[index];
      this.$api.announce
        .hasread({
          isread: true,
          notice_id: row.notice_id,
          roleid: this.$store.state.m_user.userInfo.roleId
        })
        .then(res => {
          if (res.code === 200) {
            console.log("已读修改");
          }
        });
      this.$router.push({
        path: row.path,
        query: { id: row.notice_id, remark: row.remark }
      });
    },

    /**
     * @description: 组织架构子模块
     * @param {type}
     * @return:
     */
    toOrganizationPage() {
      this.$router.push({
        path: this.$route.path + "/index_detail/" + "organization"
      });
    },

    /**
     * @description: 应急电话子模块
     * @param {type}
     * @return:
     */
    toEmergencyPage() {
      this.$router.push({
        path: this.$route.path + "/index_detail/" + "emergency"
      });
    },

    /**
     * @description: 文件中心子模块
     * @param {type}
     * @return:
     */
    toFileCenterPage() {
      this.$router.push({
        path: this.$route.path + "/index_detail/" + "filecenter"
      });
    }
  }
};
</script>

<style lang="less" scoped>
.map-marker-info:hover {
  cursor: pointer;
}
.overview-container {
  height: 100%;
  overflow: hidden;
  .el-col {
    height: 100%;
    [class*="-container"] {
      width: 100%;
    }
  }

  .todolist-container {
    height: calc(~"50% - 5px");
    margin-bottom: 5px;
  }
  .progress-container {
    height: calc(~"50% - 5px");
    margin-bottom: 5px;
  }

  // 节点进度数据显示容器
  .in-progress-container {
    flex: 1;
    width: 100%;
    height: calc(~"100% - 10px");
    margin: 5px auto;
    overflow: hidden;
    // height: auto;

    .progress-header {
      box-sizing: border-box;
      display: flex;
      height: 25px;
      background-color: #f2f2f2;
      .title {
        font-size: 10px;
        width: 100px;
        line-height: 25px;
      }
      .step {
        font-size: 10px;
        line-height: 25px;
        margin: auto;
        flex: 1;
        border-right: 1px solid rgba(200, 200, 200, 0.5);
      }
    }

    .progress-body {
      height: calc(~"100% - 30px");
      text-align: left;
      overflow: hidden;
      margin-top: 2px;
      box-sizing: border-box;

      .progress-item {
        margin: 5px 0px;
        height: 20px;
        display: flex;
        vertical-align: middle;
        // border-bottom: lightblue 1px solid;
        .item-projectid {
          line-height: 20px;
          font-size: 10px;
          width: 100px;
          text-align: left;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .item-status {
          font-size: 10px;
          color: white;
          line-height: 15px;
          text-align: center;
          margin: auto;
          height: 15px;
          flex: 1;
          // border-right: 1px solid rgba(200, 200, 200, 0.5);
          background-color: rgba(200, 200, 200, 0.5);
        }

        .finish {
          background-color: #48cfae;
        }

        .runing {
          background-color: rgba(255, 165, 0, 0.5);
        }
      }
    }
    .progress-body::-webkit-scrollbar {
      width: 0;
    }
  }

  .picture-container {
    height: calc(~"50% - 5px");
    margin-bottom: 5px;
  }
  .notify-container {
    height: calc(~"50% - 5px");
    margin-bottom: 5px;
  }

  .other-container {
    height: calc(~"50% - 5px");
    margin-bottom: 5px;
    .btns-container {
      display: flex;
      flex-direction: row;
      // justify-content: space-between;
      .btn-item {
        flex: 1;
        text-align: center;
        margin: 10px;
        height: fit-content;
        padding: 5px;
        div {
          color: white;
          height: 30px;
          width: 30px;
          border-radius: 50%;
          text-align: center;
          margin: auto;
          background-color: #1296db;

          i {
            font-size: 14px;
            line-height: 30px;
          }
        }
        span {
          color: black;
          font-size: 14px;
          margin-top: 10px;
        }
      }

      .btn-item:hover {
        background-color: gainsboro;
        cursor: pointer;
      }
    }
  }

  .location-container {
    height: calc(~"50% - 5px");
    margin-bottom: 5px;
  }
}
.el-button {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  color: black;
  margin: 3px 10%;
}
</style>

<style lang="less">
.picture-container {
  .el-carousel {
    height: 100%;
    .el-carousel__container {
      height: 100%;

      .el-carousel__item {
        height: 100%;
      }
      .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
      }

      .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
      }

      .el-carousel__item:nth-child(2n + 1) {
        background-color: #d3dce6;
      }
    }
  }
}
</style>